<template>
	<view class="sort" @click="sortChange" :class="ggclass" :style="{fontSize:size}">
		<!-- <i class="iconfont iconpaixu"></i>
		<i class="iconfont iconpaixu up" v-if="val == 1"></i>
		<i class="iconfont iconpaixu down" v-if="val == 2"></i> -->
		<slot></slot>
		<view class="icon-box">
			<text class="triangle up" :style="[triangleStyle]"></text>
			<text class="triangle down" :style="[triangleStyleDown]"></text>
		</view>
	</view>
</template>

<script>
	import propsMixin from '../mixins/props/index.js'
	export default {
		mixins: [propsMixin],
		props: {
			value: {
				type: [String, Number, Boolean],
				default: ''
			},
			size: {
				type: String,
				default: ''
			},
		},
		data() {
			return {};
		},
		methods: {
			sortChange() {
				switch (this.val) {
					case '':
						this.val = true;
						break;
					case true:
						this.val = false;
						break;
					case false:
						this.val = '';
						break;
					default:
						break;
				}
			},
			reset() {
				this.val = '';
			}
		},
		computed: {
			val: {
				get() {
					return this.value
				},
				set(val) {
					this.$emit('input', val)
					this.$emit('change', val)
				}
			},
			colorMain() {
				return this.color || this.$color.main
			},
			triangleStyle() {
				let num = parseInt(this.size) * 0.4
				let numStr = `${num}rpx`
				let params = {
					"borderTop": `${numStr} solid transparent`,
					"borderRight": `${numStr} solid transparent`,
					"borderLeft": `${numStr} solid transparent`,
					"borderBottom": `${numStr} solid #999999`,
				}
				if (((this.val !== '') && (Boolean(this.val) === true))) {
					params['borderBottom'] = `${numStr} solid ${this.colorMain}`
				} else {
					params['borderBottom'] = `${numStr} solid #999`
				}
				return params
			},
			triangleStyleDown(){
				let num = parseInt(this.size) * 0.4
				let numStr = `${num}rpx`
				let params = this.triangleStyle
				if (((this.val !== '') && (Boolean(this.val) === false))) {
					params['borderBottom'] = `${numStr} solid ${this.colorMain}`
				} else {
					params['borderBottom'] = `${numStr} solid #999`
				}
				return params
			}


		}
	};
</script>

<style lang="scss" scoped>
	.sort {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;

		.icon-box {
			margin-left: 10rpx;
			display: flex;
			flex-direction: column;

			.up {}

			.down {
				transform: rotate(180deg);
				margin-top: 5rpx;
			}

			.triangle {
				width: 0;
				height: 0;
				// border-top: 12rpx solid transparent;
				// border-right: 12rpx solid transparent;
				// border-left: 12rpx solid transparent;
				// border-bottom: 10rpx solid #999999;
			}
		}

	}
</style>